<template>
    <div>
        <el-row :gutter="20">
            <el-col :md="24">
                <page-main class="setting-left flex justify-center flex-direction align-center bg">
                    <div class="setting-left-avatar">
                        <el-upload
                            class="avatar-uploader"
                            action=""
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            :http-request="httpRequest"
                            :on-change="imgCastChange"
                        >
                            <el-avatar :size="80" :src="userInfo.avatar" />
                        </el-upload>
                    </div>
                    <div class="setting-left-name">
                        {{ userInfo.name }}
                    </div>
                    <div class="setting-left-tag flex justify-center align-center">
                        <el-tag effect="dark" type="danger" round>
                            {{ userInfo.tag }}
                        </el-tag>
                    </div>
                </page-main>
            </el-col>
            <el-col :md="24">
                <page-main>
                    <el-tabs tab-position="top">
                        <el-tab-pane label="用户详情" class="security">
                            <div class="setting-list">
                                <div class="item">
                                    <div class="content">
                                        <div class="title">ID</div>
                                        <!--                                        <div class="desc">当前密码强度：强</div>-->
                                    </div>
                                    <div class="action">
                                        <div class="active-font">
                                            1231231
                                        </div>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="content">
                                        <div class="title">密保手机</div>
                                        <div class="desc">已绑定手机：187****3441</div>
                                    </div>
                                    <div class="action">
                                        <el-button type="text">修改</el-button>
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="content">
                                        <div class="title">备用邮箱</div>
                                        <div class="desc">当前未绑定备用邮箱</div>
                                    </div>
                                    <div class="action">
                                        <el-button type="text">绑定</el-button>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="编辑资料" class="basic">
                            <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"
                                     label-suffix="："
                            >
                                <el-form-item label="手机号码" prop="mobile">
                                    <el-input v-model="formData.mobile" placeholder="请输入手机号" :maxlength="11" clearable
                                              :style="{width: '80%'}"
                                    />
                                </el-form-item>
                                <el-form-item label="性别" prop="sex">
                                    <el-radio-group v-model="formData.sex" size="medium">
                                        <el-radio v-for="(item, index) in sexOptions" :key="index" :label="item.value"
                                                  :disabled="item.disabled"
                                        >
                                            {{ item.label }}
                                        </el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item label="生日" prop="birthday">
                                    <el-date-picker v-model="formData.birthday" format="yyyy-MM-dd"
                                                    value-format="yyyy-MM-dd"
                                                    :style="{width: '80%'}" placeholder="请选择生日" clearable
                                    />
                                </el-form-item>
                                <el-form-item label="所在城市" prop="city">
                                    <cascader-area v-model="formData.city" style="{width: '80%'}" />
                                </el-form-item>
                                <el-form-item label="身份" prop="id">
                                    <el-input v-model="formData.id" placeholder="请输入身份" clearable
                                              :style="{width: '80%'}"
                                    />
                                </el-form-item>
                                <el-form-item label="个性签名" prop="sign">
                                    <el-input v-model="formData.sign" placeholder="请输入个性签名" clearable
                                              :style="{width: '80%'}"
                                    />
                                </el-form-item>
                                <el-form-item label="学科" prop="class">
                                    <el-input v-model="formData.class" placeholder="请输入学科" clearable
                                              :style="{width: '80%'}"
                                    />
                                </el-form-item>
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="formData.email" placeholder="请输入邮箱" clearable
                                              :style="{width: '80%'}"
                                    />
                                </el-form-item>
                                <el-form-item label="密码" prop="password">
                                    <el-input v-model="formData.password" placeholder="请输入密码" clearable show-password
                                              :style="{width: '80%'}"
                                    />
                                </el-form-item>
                                <el-form-item size="large">
                                    <el-button type="primary" @click="submitForm">提交</el-button>
                                    <el-button @click="resetForm">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </page-main>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {uploadImgToBase64} from '@/util'
import {mapMutations, mapState} from 'vuex'
import CascaderArea from '@/components/CascaderArea'
export default {
    name: 'PersonalSetting',
    components: {CascaderArea},
    beforeRouteLeave(to, from, next) {
        if (['personalEditPassword'].includes(to.name)) {
            this.$store.commit('keepAlive/add', 'PersonalSetting')
        }
        next()
    },
    props: {},
    data() {
        return {
            circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
            formData: {
                mobile: undefined,
                sex: undefined,
                birthday: null,
                id: undefined,
                sign: undefined,
                class: undefined,
                email: undefined,
                password: undefined,
                city: ['', '', '']
            },
            rules: {
                mobile: [
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }, {
                        pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                        message: '手机号格式错误',
                        trigger: 'blur'
                    }
                ],
                sex: [],
                birthday: [],
                id: [],
                sign: [],
                class: [],
                email: [{
                    pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
                    message: '请输入正确的邮箱',
                    trigger: 'blur'
                }],
                password: []
            },
            sexOptions: [{
                'label': '保密',
                'value': 0
            }, {
                'label': '男',
                'value': 1
            }, {
                'label': '女',
                'value': 2
            }]
        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info
        })
    },
    created() {
    },
    mounted() {
    },
    methods: {
        ...mapMutations('user', ['setUserInfo']),
        imgCastChange(file) {
            const {raw} = file
            uploadImgToBase64(raw).then(res => {
                const data = {
                    avatar: res.result
                }
                // this.$message.success('更改成功！')
                this.setUserInfo(data)
            })
        },
        handleSuccess(res) {
            if (res.error === '') {
                this.form.headimg = res.data.path
            } else {
                this.$message.warning(res.error)
            }
        },
        handleAvatarSuccess(res, file) {
            this.circleUrl = URL.createObjectURL(file.raw)
        },
        beforeAvatarUpload(file) {
            const isImg = /^image\/(jpeg|png|jpg)$/.test(file.type)
            const isLt2M = file.size / 1024 / 1024 < 1

            if (!isImg) {
                return this.$message.error('上传头像图片格式错误！只能上传png jpg jpeg!')
            }
            if (!isLt2M) {
                return this.$message.error('上传头像图片大小不能超过 1MB!')
            }
            return isImg && isLt2M
        },
        httpRequest(options) {
            const {file} = options
            console.log(file)
        },
        submitForm() {
            this.$refs['elForm'].validate(valid => {
                if (!valid) {
                    console.log(this.formData)
                }
                console.log(this.formData)
                // TODO 提交表单
            })
        },
        resetForm() {
            this.$refs['elForm'].resetFields()
        }
    }
}
</script>

<style lang="scss" scoped>
.el-cascader {
    width: 80%;
}

//::v-deep .el-tabs {
//    .el-tabs__header .el-tabs__nav {
//        .el-tabs__active-bar {
//            z-index: 0;
//            width: 100%;
//            background-color: #e1f0ff;
//            border-right: 2px solid #409eff;
//        }
//        .el-tabs__item {
//            text-align: left;
//            padding-right: 100px;
//        }
//    }
//    .el-tab-pane {
//        padding: 0 20px 0 30px;
//    }
//}
h2 {
    margin: 0;
    margin-bottom: 30px;
    font-weight: normal;
}
.basic {
    padding-top: 15px;
    padding-left: 15px;
}
.setting-left {
    padding: 20px;
    .setting-left-name {
        margin-top: 15px;
        font-size: 24px;
        font-weight: 500;
        color: #262626;
    }
    .setting-left-tag {
        width: 100%;
        margin-top: 15px;
        button {
            width: 40%;
        }
    }
}
.security {
    .setting-list {
        .item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid #e8e8e8;
            margin-bottom: 15px;
            .content {
                .title {
                    margin-bottom: 5px;
                    color: #666;
                }
                .desc {
                    font-size: 14px;
                    color: #999;
                }
            }
            &:last-child {
                border-bottom: 0;
            }
        }
    }
}
.bg {
    background: url(../../assets/images/user-header.png) no-repeat;
    background-size: cover;
    border-radius: 4px;
    height: 204px;
}
</style>
